<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋</title>
    <style>
        canvas {
            background: url(imgs/QP.PNG) repeat;
        }
    </style>
</head>

<body>
    <canvas id="c1" width="600" height="600">
        浏览器不支持canvas
    </canvas>

</body>
<script>
    /**   @type {HTMLCanvasElement}*/

    //拿到画布
    var c1 = document.getElementById('c1');

    //拿到画笔
    var ctx = c1.getContext('2d');

    //画棋盘
    for (var i = 20; i <= 580; i += 40) {
        ctx.beginPath();
        ctx.moveTo(20, i);
        ctx.lineTo(580, i)
        ctx.closePath();
        ctx.stroke();
    }

    for (var i = 20; i <= 580; i += 40) {
        ctx.beginPath();
        ctx.moveTo(i, 20);
        ctx.lineTo(i, 580)
        ctx.closePath();
        ctx.stroke();
    }


    //下棋
    var image_hei = new Image()
    image_hei.src = 'imgs/hei.png'

    var image_bai = new Image()
    image_bai.src = 'imgs/bai.png'

    var isHei = true;
    var flag = false;

    c1.onclick = function (e) {
        if (flag) {
            alert('已经赢了,请重新开始')
            window.location.reload();
            return;
        }

        //获取点击时鼠标位置
        var x = e.clientX;
        var y = e.clientY;

        var index_x = parseInt(x / 40);
        var index_y = parseInt(y / 40);
        if (array[index_x][index_y] == 0) {
            if (isHei) {
                drawHei(index_x, index_y);
                isHei = false
                is_win(index_x, index_y, 1)
            }
            else {
                drawBai(index_x, index_y);
                isHei = true
                is_win(index_x, index_y, 2)
            }


        } else {
            alert('已有棋子，不能重复落子')
        }

        console.log(array)
    }
    function drawHei(x, y) {
        ctx.drawImage(image_hei, x * 40, y * 40, 36, 36);
        array[x][y] = 1
    }

    function drawBai(x, y) {
        ctx.drawImage(image_bai, x * 40, y * 40, 36, 36);
        array[x][y] = 2
    }

    var array = new Array();
    for (var i = 0; i < 15; i++) {
        array[i] = new Array();
        for (var j = 0; j < 15; j++) {
            array[i][j] = 0;
        }

    }

    function is_win(x, y, heibai) {

        //上下判断
        var sum = 0
        for (var j = y; j >= 0; j--) {
            if (array[x][j] == heibai) {
                sum += heibai
            }
            else {
                break;
            }
        }
        for (var j = y + 1; j < 15; j++) {
            if (array[x][j] == heibai) {
                sum += heibai
            }
            else {
                break;
            }
        }
        //console.log(sum)
        if (sum == 5 && heibai == 1) {
            alert('黑获胜')
            flag = true

        }
        if (sum == 10 && heibai == 2) {
            alert('白获胜')
            flag = true
        }

        //左右判断
        var sum = 0
        for (var i = x; i >= 0; i--) {
            if (array[i][y] == heibai) {
                sum += heibai
            }
            else {
                break;
            }
        }
        for (var i = x + 1; i < 15; i++) {
            if (array[i][y] == heibai) {
                sum += heibai
            }
            else {
                break;
            }
        }
        //console.log(sum)
        if (sum == 5 && heibai == 1) {
            alert('黑获胜')
            flag = true
        }
        if (sum == 10 && heibai == 2) {
            alert('白获胜')
            flag = true
        }


        //左上又下
        var sum = 0
        for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
            if (array[i][j] == heibai) {
                sum += heibai
            }
            else {
                break;
            }
        }
        for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
            if (array[i][j] == heibai) {
                sum += heibai
            }
            else {
                break;
            }
        }
        //console.log(sum)
        if (sum == 5 && heibai == 1) {
            alert('黑获胜')
            flag = true
        }
        if (sum == 10 && heibai == 2) {
            alert('白获胜')
            flag = true
        }



        //右上左下
        var sum = 0
        for (var i = x, j = y; i < 15, j >= 0; i++, j--) {
            if (array[i][j] == heibai) {
                sum += heibai
            }
            else {
                break;
            }
        }
        for (var i = x - 1, j = y + 1; i >= 0, j < 15; i--, j++) {
            if (array[i][j] == heibai) {
                sum += heibai
            }
            else {
                break;
            }
        }
        //console.log(sum)
        if (sum == 5 && heibai == 1) {
            alert('黑获胜')
            flag = true
        }
        if (sum == 10 && heibai == 2) {
            alert('白获胜')
            flag = true
        }

    }
</script>

</html>